import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
} from "snabbdom";
// patch函数
const patch = init([classModule,
    propsModule,
    styleModule,
    eventListenersModule
]);

var vnode1 = h("ul", {}, [
    h("li", {
        key: "A"
    }, "A"),
    h("li", {
        key: "B"
    }, "B"),
    h("li", {
        key: "C"
    }, "C"),
])

var vnode2 = h("ul", {}, [
    h("li", {
        key: "D"
    }, "D"),
    h("li", {
        key: "A"
    }, "A"),
    h("li", {
        key: "B"
    }, "B"),
    h("li", {
        key: "C"
    }, "C"),

])

var vnode3 = h("div", {}, h("section", {}, [
    h("li", {
        key: "D"
    }, "D"),
    h("li", {
        key: "A"
    }, "A"),
    h("li", {
        key: "B"
    }, "B"),
    h("li", {
        key: "C"
    }, "C"),
]))

const container = document.getElementById("container");
const btn = document.getElementById("btn");

// 上树
// patch(container, vnode1);

patch(container, vnode2)

// 点击按钮将vnode1变为vnode2
btn.onclick = function () {
    patch(vnode2, vnode3);
}